<template>
  <div class="user-table" :class="width == 'small'?'small':''">
    <el-table class="user-table__inner"
              :data="tableData.list"
              header-row-class-name="user-table__header"
              height="2rem"
    >

      <el-table-column min-width="160px"
                       class-name="user-table__tr"
                       :label="title">
        <template slot-scope="{row}">
          <member-cell :username="row.userName" :online="row.online" :type="type" :data="row"></member-cell>
        </template>
      </el-table-column>

      <el-table-column
          class-name="user-table__tr user-table__tr-small"
          align="center"
          v-if="showRecharge"
          label="">
        <template slot-scope="{row}">
          {{row['1000.amount'] || row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column
          class-name="user-table__tr"
          align="right"
          min-width="80px"
      >
        <template slot="header" slot-scope="scope">
          <el-pagination
              class="user-table__pagination"
              :small="true"
              layout="prev, next"
              :hasmore="!tableData.hasmore&&tableData.hasmore!=undefined"
              @size-change="gridSizeChange" @current-change="gridCurrentChange"
              :current-page="filters.page" :page-size="filters.size"
              :total="tableData.total">
          </el-pagination>
        </template>
        <template slot-scope="{row}">
          {{row['1000.payTime'] || row.regTime || row.timestamp | fromNow}}
        </template>
      </el-table-column>

      <template slot="empty">
        <div class="user-table__empty">
          暂无数据
        </div>
      </template>
    </el-table>
  </div>
</template>

<script>
  import {grid} from '@/build';

  export default {
    name: "user-table",

    props: ['api', 'title', 'showRecharge', 'type', 'width'],

    mixins: [grid],

    data() {
      return {
        filters: {
          page: 1,
          size: 4,
        },
        tableData: {
          list: [],
          total: 0
        }
      };
    },

    methods: {
      openMemberTable({username}) {
        this.$router.push({name: 'lower-level-center', params: {username}});
      }
    },

    mounted() {
      this.bindGet(this.api, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
      });

      this.getAll();
    }
  }
</script>

<style lang="scss">
  $--height: 200px !default;
  $--header-height: 40px !default;

  @include b(user-table) {
    width: 500px;
    height: 200px;
    margin: 5px;
    @include e(inner) {
      height: $--height;
      box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.05);
    }
    @include e(empty) {
      line-height: $--height - $--header-height;
    }
    @include e(header) {
      height: $--header-height;
      padding: 8px 0;
      th {
        background: rgba(251, 251, 251, 1) !important;
        border-bottom: 0 !important;
        font-size: $--font-size-small;
      }
    }
    @include e(tr) {
      padding: 8px 0 !important;
      .text-button {
        height: 14px;
        line-height: 14px;
        padding: 0;
        font-size: 14px;
      }
    }
    @include e(tr-small) {
      .cell {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }
    @include e(pagination) {
      display: block !important;
      padding: 0 !important;
      line-height: 20px !important;
    }
  }

  @include b(small) {
    width: 380px;
  }
</style>